import { Modal, message as Message, notification } from "ant-design-vue";
import {
  InfoCircleFilled,
  CheckCircleFilled,
  CloseCircleFilled,
} from "@ant-design/icons-vue";

function getIcon(iconType) {
  if (iconType === "waining") {
    return <InfoCircleFilled class="modal-icon-warning"></InfoCircleFilled>;
  } else if (iconType === "success") {
    return <CheckCircleFilled class="modal-icon-success"></CheckCircleFilled>;
  } else if (iconType === "info") {
    return <InfoCircleFilled class="modal-icon-info"></InfoCircleFilled>;
  } else {
    return <CloseCircleFilled class="modal-icon-error"></CloseCircleFilled>;
  }
}

function renderContent({ content }) {
  if (isString(content)) {
    return <div innerHTML={`<div>${content}</div>`}></div>;
  } else {
    return content;
  }
}

/**
 * 创建确认弹窗
 */
function createConfirm(options) {
  const iconType = options.iconType || "warning";
  Reflect.deleteProperty(options, "iconType");
  const opt = {
    centered: true,
    icon: getIcon(iconType),
    ...options,
    content: renderContent(options),
  };
  return Modal.confirm(opt);
}

const getBaseOptions = () => {
  const { t } = useI18n();
  return {
    okText: t("common.okText"),
    centered: true,
  };
};

function createModalOptions(options, icon) {
  return {
    ...getBaseOptions(),
    ...options,
    content: renderContent(options),
    icon: getIcon(icon),
  };
}

function createSuccessModal(options) {
  return Modal.success(createModalOptions(options, "success"));
}

function createErrorModal(options) {
  return Modal.error(createModalOptions(options, "error"));
}

function createInfoModal(options) {
  return Modal.info(createModalOptions(options, "info"));
}

function createWarningModal(options) {
  return Modal.warning(createModalOptions(options, "warning"));
}

export function useMessage() {
  return {
    createMessage: Message,
    notification: notification,
    createConfirm,
    createSuccessModal,
    createErrorModal,
    createInfoModal,
    createWarningModal,
  };
}
